import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import './product.scss';
import configs from "../../configuration"
import { AtIcon, AtAvatar } from 'taro-ui'
import {good_request_noverify} from "../../untils/request"
import select from '../../assets/images/select.png'
import noselect from '../../assets/images/noselect.png'
import Header from '../../component/header/index'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '购买服务'
  };

  constructor(props) {
    super(props);
    this.state = {
      name: '请先登录',
      person_img: configs.cdnserver +'global_icon_personcenter_14x16_@3x.png',
      goods: {},
      items: [],
      select_item: {}
    }
  }


  componentWillMount() {
    var gid = this.$router.params.gid
    var self = this
    good_request_noverify(configs.apis['@goods/info'],'get', {
      gid: gid,api_version:configs.api_version
    }).then((res) => {
      console.log(res)
      self.setState({
        goods: res.res.data.goods,
        items: res.res.data.groups,
        select_item: res.res.data.groups[0].modules[0],
      });

    });
  }

  confirmOrder(post, e) {
    var self = this
    var token = Taro.getStorageSync('access_token')
    console.log(token)
    if(token){
      good_request_noverify(configs.apis['userinfo'], 'get', { 'app_id': configs.app_id },{
        'Authorization': 'Bearer ' + token
      }).then(res => {
        /*self.setState({ items: res.res.items });
        */
        if (res.code != 0 ){
          Taro.navigateTo({
            url: '/pages/login/login',
          })
        }else {
          var phone = res.res.user_bind_phone
          var gid = post.gid
          var mid = post.id
          Taro.navigateTo({
            url: `/pages/confirmOrder/confirmOrder?gid=${gid}&mid=${mid}&phone=${phone}`,
          })
        }
      });
    }else {
      Taro.navigateTo({
        url: '/pages/login/login',
      })
    }
  }

  changeID(post, e) {
    console.log(post)
    var self = this
    self.setState({
      select_item:post
    });
  }

  render() {
    var { items, goods, select_item } = this.state

    var template_card = <View className='custom_card'>
      <AtAvatar circle image={goods.thumb} className='custom_card_img' ></AtAvatar>
      <View className='custom_card_div'>
        <Text className='custom_card_des'>{goods.description}</Text>
        <Text className='custom_card_price'>￥{select_item.price}</Text>
      </View>
    </View>

    var goods_select = <View className="goods_select_lists">
      {items.map((posts,index) => {
        return(<View key={index} className="goods_select_lists_div">
          <Text className="goods_select_lists_title">{posts.title}</Text>
          <View>
            {
              posts.modules.map((post,_index) => <View key={post.id} className={select_item.id === post.id ? "goods_select_list goods_select_list_checked" : "goods_select_list" } onClick={this.changeID.bind( this, post )}>
                <Text className="goods_select_list_name">{post.name}</Text>
                <Text className="goods_select_list_price">{post.price}</Text>
                <Image className="goods_select_list_img" src={select_item.id === post.id ? select : noselect} />
              </View>)
            }
          </View>
        </View>)
      })}
    </View>;

    var product_explain = <View className='product_explain_div'>
      <View className='product_explain_div_name'>{select_item.name}</View>
      <View className='product_explain_div_des'>{select_item.description}</View>
    </View>

    var aboutus = <View className='aboutus_promise'>
      <View className='aboutus_promise_name'>
        <Image className="aboutus_promise_name_img" src={ select } />
        <Text className='aboutus_promise_name_text' >双倍赔付承诺</Text>
      </View>
      <View className='aboutus_promise_content'>
        凡通过我们没能恢复成功，通过其他渠道成功恢复的，凭相关凭证，平台双倍退款。
      </View>
      <View className='aboutus_name'>
        团队介绍：
      </View>
      <View className='aboutus_content'>
        果师兄工程师团队拥有30名经验丰富的研发和数据恢复人员，具有完善的数据分析设备和流程体系；公司研发的数据恢复软件深耕海外10多年，并在国内市场居于领先地位，现已服务百万级用户，用户遍布全国31个省市自治区。
      </View>
    </View>

    var template_pay = <View className='template_pay_div'>
      <View className='template_pay_left'>
        <Text className='template_pay_left_total'>合计：</Text>
        <Text className='template_pay_left_price'>￥{select_item.price}</Text>
      </View>
      <View className='template_pay_right' onClick={this.confirmOrder.bind(this,select_item)}>
        立即下单
      </View>
    </View>

    var hedaer = <Header name={this.config.navigationBarTitleText} />

    var env = Taro.getEnv().toUpperCase()

    return <View style='position:relative;'>
      {env === 'WEB' ? hedaer : '' }
      {template_card}
      <View className='f2_line'></View>
      {goods_select}
      {product_explain}
      {aboutus}
      {template_pay}
    </View>
  }
}
